<a href="<%= timeline_event_path(submission) %>" class="block p-5 border border-gray-200 border-s-3 border-s-gray-400 rounded-lg hover:bg-primary-50 hover:text-primary-500 hover:border-primary-500 cursor-pointer" >
  <div class="flex flex-col gap-3 md:flex-row items-start justify-between">
    <div>
      <p>
        <span class="font-semibold text-sm md:text-base">
          <%= submission.target.title_with_milestone %>
        </span>
      </p>
      <p class="text-xs md:text-sm text-gray-600 mt-1">
        <span title="<%= submission.created_at.iso8601 %>"><%= t('.submitted_time_ago', time_ago_in_words: time_ago_in_words(submission.created_at)) %></span>
      </p>
    </div>
    <% if submission.evaluated_at.present? %>
      <div class="flex md:flex-col items-center md:items-end text-xs gap-1 mt-2 md:mt-0">
        <div class="px-2 py-1 rounded-lg font-medium <%= submission.passed_at.present? ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' %>"><%= submission.passed_at.present? ? t('.accepted') : t('.rejected') %></div>
        <div class="italic text-right rtl:text-left w-full whitespace-nowrap" title="<%= submission.evaluated_at.iso8601 %>"><%= t('.reviewed_time_ago', time_ago_in_words: time_ago_in_words(submission.evaluated_at)) %></div>
      </div>
    <% end %>
  </div>
</a>
